<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>职位管理</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="../css/tfy/职位管理.css" />
  </head>
  <body>
    <div style="width: 100%">
      <nav class="nav-ct">
        <div class="nav-hd">
          <span class="iconfont icon-oabangong"></span>
          <span class="title">办公后台系统</span>
        </div>
        <div class="center">
          <ul class="nav-content">
            <li><a href="">工作台</a></li>
            <li><a href="">数据大屏</a></li>
            <li><a href="">员工</a></li>
            <li><a href="">组织</a></li>
            <li><a href="">招聘</a></li>
            <li><a href="">考勤</a></li>
            <li><a href="">薪酬</a></li>
            <li><a href="">社保公积金</a></li>
            <li><a href="">绩效</a></li>
            <li><a href="">培训</a></li>
            <li><a href="">审批</a></li>
            <li><a href="">权限设置</a></li>
          </ul>
        </div>
      </nav>
      <div class="ct-box">
        <div class="nav-ct-2">
          <ul class="nav-ct-menu">
            <li class="title">
              组织架构
              <ul>
                <li><a href="./组织管理.html">组织管理</a></li>
                <li><a href="">组织架构图</a></li>
                <li><a href="">工作职场</a></li>
              </ul>
            </li>
            <li class="title">
              职位体系
              <ul>
                <li><a href="./职位管理.html">职位管理</a></li>
                <li><a href="./职务管理.html">职务管理</a></li>
                <li><a href="./职级管理.html">职级管理</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="box">
          <!-- 内容填充,左侧导航栏根据此地方内容自适应。 -->
          <div class="organization">
            <div class="organization-box">
              <div class="box-title">
                <div>
                  <span class="aa">职位管理</span>
                </div>
                <hr />
                <span>职位名称：</span><input id="input1" type="text" style="margin-right: 20px;">
                <span>职位类别：</span>
                <select name="" id="input2" style="width: 178px; height:24px;margin-right: 20px;">
                  <option value="研发类">研发类</option>
                  <option value="技术类">技术类</option>
                  <option value="科技类">科技类</option>
                </select>
                <span>所属部门：</span>
                <select name="" id="input3" style="width: 178px; height:24px;margin-right: 20px;">
                  <option value="研发部">研发部</option>
                  <option value="技术部">技术部</option>
                  <option value="科技部">科技部</option>
                </select>
                <button id="search" >搜索</button>
                  <div class="filter">
                    <span>筛选条件：</span><span>职位名称：产品经理</span>
                  </div>
                </div>

                
              </div>
              <div class="box-body">
                <div>
                  <button type="button" class="btn btn-primary" id="new">
                    + 新增课程
                  </button>
                  <div
                  class="modal fade"
                  id="myModal2"
                  tabindex="-1"
                  role="dialog"
                  aria-labelledby="myModalLabel"
                  aria-hidden="true"
                >
                  <div class="modal-dialog" style="    margin-top: 14%;">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button
                          type="button"
                          class="close"
                          data-dismiss="modal"
                          aria-hidden="true"
                        >
                          &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">添加</h4>
                      </div>
                      <div class="modal-body" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">  
                        <div>
                          <span>职位名称：</span>
                          <input type="text">
                        </div>
                        <div>
                          <span>职位编码：</span>
                          <input type="text">
                        </div>
                        <div>
                          <span>职位类别：</span>
                          <select name="" id="input2" style="width: 255px; height:32px;">
                            <option value="研发类">研发类</option>
                            <option value="技术类">技术类</option>
                            <option value="科技类">科技类</option>
                          </select>
                        </div>
                        <div>
                          <span >所属部门：</span>
                          <select name="" id="input3" style="width: 255px; height:32px;">
                            <option value="研发部">研发部</option>
                            <option value="技术部">技术部</option>
                            <option value="科技部">科技部</option>
                          </select>
                        </div>
                        <div>
                          <span>职位描述：</span>
                          <input type="text">
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >
                          关闭
                        </button>
                        <button type="button" class="btn btn-primary" id="new2">
                          确认添加
                        </button>
                      </div>
                    </div>
                    <!-- /.modal-content -->
                  </div>
                  <!-- /.modal -->
                </div>
                </div>
               
                <table class="table">
                  <thead>
                    <tr>
                      <th></th>
                      <th>序列</th>
                      <th>职位名称</th>
                      <th>职位编码</th>
                      <th>职位类别</th>
                      <th>所属部门</th>
                      <th>职位描述</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
                <!-- <div id="modifyModal">
                  <div class="modify-modal-box">
                    <div id="modifyModalContent">
                      <form>
                        <div class="popUp">
                          <div>职位管理</div>
                          <div class="row">
                            <label>序列：</label>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
                              id="ManagementId"
                              type="text"
                            />
                          </div>
                          <div class="row">
                            <label>职位名称：</label
                            ><input id="ManagementJobTitle" type="text" />
                          </div>
                          <div class="row">
                            <label>职位编码：</label
                            ><input id="ManagementJobCoding" type="text" />
                          </div>
                          <div class="row">
                            <label>所属部门：</label>
                            <select
                              id="ManagementDepartmentAffiliation"
                              type="text"
                              style="width: 175px"
                            >
                              <option value="技术部">技术部</option>
                              <option value="开发部">开发部</option>
                            </select>
                          </div>
                          <div class="row">
                            <label>职位类别：</label>
                            <select
                              id="ManagementJobCategory"
                              type="text"
                              style="width: 175px"
                            >
                              <option value="研发类">研发类</option>
                              <option value="设计类">设计类</option>
                            </select>
                          </div>
                          <div class="row">
                            <label>描述：</label
                            ><input id="ManagementJobDescription" type="text" />
                          </div>
                        </div>
                      </form> -->
                      <!-- form 会导致 自动关闭 -->
                 <!-- <div class="row">
                        <button id="cancelBtn">取消</button>
                        <span></span>
                        <button id="confirmBtn">提交</button>
                      </div>
                </div> -->
                <!-- </div>
                </div> -->
                <div
                  class="modal fade"
                  id="myModal"
                  tabindex="-1"
                  role="dialog"
                  aria-labelledby="myModalLabel"
                  aria-hidden="true"
                >
                  <div class="modal-dialog" style="    margin-top: 14%;">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button
                          type="button"
                          class="close"
                          data-dismiss="modal"
                          aria-hidden="true"
                        >
                          &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">删除</h4>
                      </div>
                      <div class="modal-body" style="color: red">
                        确定删除此条信息
                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >
                          关闭
                        </button>
                        <button id="a" type="button" class="btn btn-primary">
                          确认
                        </button>
                      </div>
                    </div>
                    <!-- /.modal-content -->
                  </div>
                  <!-- /.modal -->
                </div>
                <div
                  class="modal fade"
                  id="myModal1"
                  tabindex="-1"
                  role="dialog"
                  aria-labelledby="myModalLabel"
                  aria-hidden="true"
                >
                  <div class="modal-dialog" style="    margin-top: 14%;">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button
                          type="button"
                          class="close"
                          data-dismiss="modal"
                          aria-hidden="true"
                        >
                          &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">编辑</h4>
                      </div>
                      <div class="modal-body" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        <div>
                          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序列：</span>
                          <input id="ManagementId" disabled type="text">
                        </div>
                        <div>
                          <span>职位名称：</span>
                          <input id="ManagementJobTitle" type="text">
                        </div>
                        <div>
                          <span>职位编码：</span>
                          <input id="ManagementJobCoding" type="text">
                        </div>
                        <div>
                          <span>职位类别：</span>
                          <input id="ManagementJobCategory" type="text">
                        </div>
                        <div>
                          <span >所示部门：</span>
                          <input id="ManagementDepartmentAffiliation" type="text">
                        </div>
                        <div>
                          <span>职位描述：</span>
                          <input id="ManagementJobDescription" type="text">
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >
                          关闭
                        </button>
                        <button  type="button" class="btn btn-primary">
                          确认修改
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="display: flex; justify-content: flex-end">
                  <div id="pre" href="#">&laquo;</div>
                  <ul class="pagination">
                    <!-- <li><a href="#">&laquo;</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li> -->                  
                  </ul>
                  <div id="next" href="#">&raquo;</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../js/tfy/职位管理.js"></script>
  </body>
</html>
